import { materialWareHouseList } from '@/services/materialWareHouse';
import { PlusOutlined } from '@ant-design/icons';
import type { ProColumns } from '@ant-design/pro-components';
import { ProTable } from '@ant-design/pro-components';
import { Button, Popconfirm } from 'antd';
import { useRef, useState } from 'react';
import MaterialWareHouseModal from '../components/MaterialWareHouseModal';
type MaterialWareHouseItem = {
  id: number;
  goodsName: string;
  principal: string;
  warehouse: string;
  weight: string;
  quality: string;
  date: number;
};

export default () => {
  const handleDelete = () => {
    console.log(1);
  };
  const [modalVisible, setModalVisible] = useState(false);
  const actionRef = useRef();

  const [initialValues, setInitialValues] = useState<
    MaterialWareHouseItem | undefined
  >();
  const handleModalVisible = (visible: boolean) => {
    setModalVisible(visible);
    if (!visible) {
      setInitialValues(undefined);
    }
  };
  const columns: ProColumns<MaterialWareHouseItem>[] = [
    {
      dataIndex: 'index',
      valueType: 'indexBorder',
      width: 48,
    },
    {
      title: '原料名称',
      dataIndex: 'goodsName',
      copyable: true,
      ellipsis: true,
    },
    {
      disable: true,
      title: '负责人',
      dataIndex: 'principal',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      disable: true,
      title: '存放仓库',
      dataIndex: 'warehouse',
      ellipsis: true,
    },
    {
      disable: true,
      title: '数量(KG)',
      dataIndex: 'weight',
      hideInSearch: true,
      ellipsis: true,
    },
    {
      disable: true,
      title: '品质',
      dataIndex: 'quality',
      ellipsis: true,
    },
    {
      title: '入库日期',
      key: 'showTime',
      dataIndex: 'date',
      valueType: 'date',
      sorter: true,
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      render: (_, record) => [
        <a
          key="editable"
          onClick={() => {
            setInitialValues(record);
            setModalVisible(true);
          }}
        >
          编辑
        </a>,
        <Popconfirm
          key="delete"
          title="确认删除此项吗?"
          onConfirm={() => handleDelete(record.id)}
          okText="确认"
          cancelText="取消"
        >
          <a href="#" style={{ color: 'red' }}>
            删除
          </a>
        </Popconfirm>,
      ],
    },
  ];
  return (
    <>
      <ProTable<MaterialWareHouseItem>
        columns={columns}
        cardBordered
        request={async () => {
          const { data, success } = await materialWareHouseList();
          return {
            data: data.materialWareHouse,
            success: success,
          };
        }}
        editable={{
          type: 'multiple',
        }}
        columnsState={{
          persistenceKey: 'materialWareHouse-table',
          persistenceType: 'localStorage',
          defaultValue: {
            option: { fixed: 'right', disable: true },
          },
          // onChange(value) {
          //   console.log('value: ', value);
          // },
        }}
        rowKey="id"
        search={{
          labelWidth: 'auto',
        }}
        options={{
          setting: {
            listsHeight: 400,
          },
        }}
        pagination={{
          pageSize: 5,
          onChange: (page) => console.log(page),
        }}
        dateFormatter="string"
        headerTitle="原料仓库信息"
        toolBarRender={() => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            type="primary"
            onClick={() => {
              handleModalVisible(true);
              setInitialValues(undefined);
            }}
          >
            新建
          </Button>,
        ]}
      />
      <MaterialWareHouseModal
        visible={modalVisible}
        onVisibleChange={handleModalVisible}
        initialValues={initialValues}
        onSuccess={() => {
          handleModalVisible(false);
          if (actionRef.current) {
            actionRef.current.reload();
          }
        }}
      />
    </>
  );
};
